<script src="../../../../../../protects/guangxifupin-front/src/containers/App/index.jsx"></script>
<template>
  <div class="padding-middle">
    <el-card :body-style="{padding:'0px'}">
      <div class="search">
        <div class="input" style="display: none">
          <el-input v-model="input" size="small" placeholder="请输入姓名或者手机号" style="width: 300px;height: 20px;margin-right: 15px"/>
          <el-button style="margin-left: 15px" plain size="small" icon="el-icon-search">查询</el-button>
        </div>
        <div class="edit">
          <router-link to="/user/addAccount/edit"><el-button type="success" size="small">添加账号</el-button></router-link>
        </div>
      </div>
      <el-table
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="150"/>
        <el-table-column
          prop="username"
          label="用户名"/>
        <el-table-column
          prop="mobile"
          label="联系电话"/>
        <el-table-column
          :formatter="toTime"
          prop="createTime"
          label="添加时间"/>
        <el-table-column
          :formatter="toTime"
          prop="updateTime"
          label="修改时间"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small">查看</el-button>-->
            <el-button size="small" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
            <el-button type="danger" size="small" plain @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="page" :page-size="pageSize" :total="total" background layout="prev, pager, next" @current-change="sizeChange"/>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        title="重置密码"
        width="30%">
        <el-form ref="ruleForm" :model="postForm" :rules="rules" style="width: 500px" label-width="80px" label-position="right" class="demo-ruleForm" auto-complete="off">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="postForm.username" :disabled="true"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="postForm.password" type="password" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="postForm.checkPass" type="password" auto-complete="off"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.postForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.postForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      page: 1,
      dialogVisible: false,
      total: 0,
      input: '',
      userId: '',
      pageSize: 10,
      size:10,
      items: [],
      postForm: {
        username: '',
        password: '',
        checkPass: ''
      },
      rules: {
        username: [
          { required: false, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {
      axios.get(`/getUserList/${'all'}/${this.page}/${this.size}`).then(res => {
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    },
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    resetPassword(data){
      this.dialogVisible = true
      this.userId = data.id
      this.postForm.username = data.username
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get(`/resetPassword/${this.userId}/${this.postForm.password.trim()}`).then(res => {
            if (res.success) {
              this.dialogVisible = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    sizeChange(page) {
      this.page=page
      this.queryList()
    },
    handleClose(done) {
      done()
  },
    /*
   *   删除特定id行
   * */
    deleteItem(row) {
      if (!confirm('确定删除')) {
        return
      }
      axios.delete(`/delUser/${row.id}/${row.type}`).then(res => {
        if (res.success) {
          this.page = 1
          this.queryList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .cover {
    width: 100px;
    height: 75px;
    box-shadow: 2px 2px 2px #eee;
  }
  .search{
    background-color: #fff;
    height: 60px;
    display: flex;
    padding: 15px 10px;
    box-sizing: border-box;
    .input{
      flex: 8;
    }
    .edit{
      flex: 2;
      text-align: right;
      padding-right: 10px;
    }
  }
</style>
